<template>
    <div id="contain">
        <div class="top1">
            <i class="el-icon-user"></i>
            个人中心
            <span style="float: right; color: blue" @click="back2Home"
                >返回首页</span
            >
        </div>
        <el-row style="margintop: 10px">
            <el-col :span="5">
                <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @select="handleSelect"
                >
                    <el-menu-item index="1">
                        <i class="el-icon-s-custom"></i>
                        <span slot="title">个人信息</span>
                    </el-menu-item>

                    <el-submenu index="2">
                        <template slot="title"
                            ><i class="el-icon-star-off"></i>我的订单</template
                        >
                        <el-menu-item index="2-1">酒店订单</el-menu-item>
                        <el-menu-item index="2-2">跟团游订单</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"
                            ><i class="el-icon-notebook-1"></i
                            >我的攻略</template
                        >
                        <el-menu-item index="3-1">我的攻略</el-menu-item>
                        <el-menu-item index="3-2">发布攻略</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="4">
                        <i class="el-icon-info"></i>
                        <span slot="title">我的意见</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="19">
                <selfinfo v-show="activeIndex === '1'"></selfinfo>
                <hotel-order v-show="activeIndex === '2-1'"></hotel-order>
                <xianluinfo v-show="activeIndex === '2-2'"></xianluinfo>
                <mygonglue  v-show="activeIndex === '3-1'" />
                <pushGongl v-show="activeIndex === '3-2'" />
                <selfYijian v-show="activeIndex === '4'" />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import hotelOrder from '@/views/userInfo/hotelOrder.vue';
import selfinfo from '@/views/userInfo/selfinfo.vue';
import xianluinfo from '@/views/userInfo/xianluinfo.vue';
import pushGongl from '@/views/userInfo/pushGongl.vue';
import selfYijian from '@/views/userInfo/selfYijian.vue';
import mygonglue from '@/views/userInfo/mygonglue.vue';

export default {
    components: {
        selfinfo,
        xianluinfo,
        pushGongl,
        selfYijian,
        mygonglue,
        hotelOrder,
    },
    data() {
        return {
            activeIndex: '1',
        };
    },
    methods: {
        handleSelect(key) {
            this.activeIndex = key;
        },
        back2Home () {
            this.$router.push('/');
        },
    },
};
</script>
<style  scoped>
#contain {
    width: 1200px;
    margin: 0 auto;
}
.intro {
    height: 350px;
}
.top1 {
    font-size: 20px;
    border-bottom: 1px solid #ccc;
    padding: 20px;
}
</style>>
